import React from 'react';
import { Button } from '@/components';
import { Spin } from 'antd';
import { useTranslation } from '@/utils/i18n';
import { useThemeStore } from '@/stores/themeStore'

interface PermissionRecord {
  id: string;
  roleName: string;
  permissionScope: string | string[];
  applicableScene: string;
  createTime: string | Date;
  // 移除any类型，使用更具体的可选属性或泛型
}

interface PermissionTableProps {
  permissions: PermissionRecord[];
  loading: boolean;
  selectedRowKeys: React.Key[];
  onRowSelect: (id: string) => void;
  onSelectAll: () => void;
  onEdit: (record: PermissionRecord) => void;
  onDelete: (id: string) => void;
  onAddPermission: () => void;
  formatPermissionScope: (scope: string | string[]) => React.ReactNode;
  formatTime: (time: string | Date) => string;
}

/**
 * 权限管理表格组件
 * 封装权限数据的展示逻辑和交互功能
 */
const PermissionTable: React.FC<PermissionTableProps> = ({
  permissions,
  loading,
  selectedRowKeys,
  onRowSelect,
  onSelectAll,
  onEdit,
  onDelete,
  onAddPermission,
  formatPermissionScope,
  formatTime
}) => {
  const { t } = useTranslation();
  const themePreference = useThemeStore((state) => state.theme)
  const isDark = React.useMemo(() => {
    if (themePreference === 'dark') return true
    if (themePreference === 'light') return false
    return window.matchMedia('(prefers-color-scheme: dark)').matches
  }, [themePreference])

  return (
    <div className="permission-table-wrapper overflow-hidden">
      {loading ? (
        <div className="flex justify-center items-center py-12 min-h-[300px]">
          <Spin size="large" />
        </div>
      ) : permissions.length > 0 ? (
        <div className="overflow-x-auto border border-gray-200 dark:border-slate-700 rounded-lg transition-colors">
          <table className={`w-full border-collapse text-gray-800 dark:text-slate-100 ${isDark ? '' : 'bg-white'}`}>
            <thead className={`${isDark ? 'bg-slate-900/70 text-slate-100' : 'bg-slate-200 text-slate-700'} transition-colors`}>
              <tr>
                <th className="px-4 py-3 text-left w-10 text-gray-700 dark:text-slate-200 font-semibold border-b border-gray-200 dark:border-slate-600">
                  <input 
                    type="checkbox" 
                    checked={permissions.length > 0 && selectedRowKeys.length === permissions.length}
                    onChange={onSelectAll}
                    className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                  />
                </th>
                <th className="px-4 py-3 text-left text-gray-700 dark:text-slate-200 font-semibold border-b border-gray-200 dark:border-slate-600">{t('permission.table.id')}</th>
                <th className="px-4 py-3 text-left text-gray-700 dark:text-slate-200 font-semibold border-b border-gray-200 dark:border-slate-600">{t('permission.table.roleName')}</th>
                <th className="px-4 py-3 text-left text-gray-700 dark:text-slate-200 font-semibold border-b border-gray-200 dark:border-slate-600">{t('permission.table.scope')}</th>
                <th className="px-4 py-3 text-left text-gray-700 dark:text-slate-200 font-semibold border-b border-gray-200 dark:border-slate-600">{t('permission.table.scene')}</th>
                <th className="px-4 py-3 text-left text-gray-700 dark:text-slate-200 font-semibold border-b border-gray-200 dark:border-slate-600">{t('permission.table.createTime')}</th>
                <th className="px-4 py-3 text-left text-gray-700 dark:text-slate-200 font-semibold border-b border-gray-200 dark:border-slate-600">{t('permission.table.actions')}</th>
              </tr>
            </thead>
            <tbody className={isDark ? 'bg-slate-800 transition-colors' : 'bg-white transition-colors'}>
              {permissions.map((record, index) => (
                <tr 
                  key={record.id} 
                  className={`${isDark ? 'bg-slate-800' : index % 2 === 0 ? 'bg-white' : 'bg-slate-50'} hover:bg-blue-500/15 dark:hover:bg-blue-400/15 transition-colors duration-150`}
                >
                  <td className="px-4 py-3 border-b border-gray-200 dark:border-slate-600">
                    <input 
                      type="checkbox" 
                      checked={selectedRowKeys.includes(record.id)}
                      onChange={() => onRowSelect(record.id)}
                      className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                    />
                  </td>
                  <td className="px-4 py-3 text-gray-700 dark:text-slate-200 border-b border-gray-200 dark:border-slate-600">{record.id}</td>
                  <td className="px-4 py-3 font-medium text-gray-800 dark:text-slate-100 border-b border-gray-200 dark:border-slate-600">{record.roleName}</td>
                  <td className="px-4 py-3 border-b border-gray-200 dark:border-slate-600">{formatPermissionScope(record.permissionScope)}</td>
                  <td className="px-4 py-3 text-gray-700 dark:text-slate-200 border-b border-gray-200 dark:border-slate-600">{record.applicableScene}</td>
                  <td className="px-4 py-3 text-gray-700 dark:text-slate-200 border-b border-gray-200 dark:border-slate-600">{formatTime(record.createTime)}</td>
                  <td className="px-4 py-3 border-b border-gray-200 dark:border-slate-600">
                    <div className="flex space-x-3">
                      <a href="#" onClick={(e) => { e.preventDefault(); onEdit(record); }} className="text-blue-600 hover:underline dark:text-blue-300">
                        {t('permission.editAction')}
                      </a>
                      <a href="#" onClick={(e) => { e.preventDefault(); onDelete(record.id); }} className="text-red-600 hover:underline dark:text-red-300">
                        {t('permission.deleteAction')}
                      </a>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : (
        <div className="flex flex-col items-center justify-center py-16 min-h-[300px] text-center text-gray-600 dark:text-slate-300 transition-colors">
          <div className="text-gray-400 dark:text-slate-500 mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <h3 className="text-lg font-medium text-gray-700 dark:text-slate-200 mb-2">{t('permission.emptyTitle')}</h3>
          <p className="text-gray-500 dark:text-slate-400 mb-6 max-w-md">{t('permission.emptySubtitle')}</p>
          <Button variant="primary" onClick={onAddPermission}>{t('permission.add')}</Button>
        </div>
      )}
    </div>
  );
};

export default PermissionTable;
export type { PermissionRecord };